<template>
  <template>
    <view class="container">
      <uni-card :is-shadow="false" is-full class="head">
        <text> 你可以在这个页面中编写稿件信息然后提交稿件</text>
        <navigator
          url="/pages/mycontribute/mycontribute"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <button open-type="" hover-class="button-hover">查看已投稿</button>
        </navigator>
      </uni-card>
      <uni-section title="稿件信息" type="line">
        <view class="example">
          <!-- 基础用法，不包含校验规则 -->
          <uni-forms ref="baseForm" :modelValue="baseFormData">
            <uni-forms-item label="标题" required>
              <uni-easyinput
                v-model="baseFormData.title"
                placeholder="请输入标题"
              />
            </uni-forms-item>
            <uni-forms-item label="简介" required>
              <uni-easyinput
                v-model="baseFormData.briefIntroduction"
                placeholder="请输入简介"
              />
            </uni-forms-item>
            <uni-forms-item class="itemImput">
              <uni-section
                title="概要"
                subTitle="请输入概要"
                type="line"
                padding
              >
                <uni-easyinput
                  type="textarea"
                  autoHeight
                  v-model="baseFormData.summary"
                  placeholder="请输入内容"
                ></uni-easyinput>
              </uni-section>
            </uni-forms-item>
            <!-- 封面 -->
            <uni-forms-item>
              <view class="img-container">
                <uni-section title="选择图片作为封面" type="line">
                  <view class="img-select-body">
                    <view>
                      <image
                        :src="baseFormData.picture"
                        class="uploadImg"
                        mode="aspectFit"
                      >
                      </image>
                    </view>
                    <button
                      hover-class="button-hover"
                      @click="onUploadImageButton"
                    >
                      <text>选择上传封面</text>
                    </button>
                  </view>
                </uni-section>
              </view>
            </uni-forms-item>
            <!-- 文件 -->
            <uni-forms-item>
              <uni-section
                title="稿件"
                subTitle="请上传稿件本体"
                type="line"
                padding
                class="upload"
              >
                <text>已上传： {{ currFileName }}</text>
                <button
                  open-type=""
                  hover-class="button-hover"
                  @click="onUploadFileButton"
                >
                  上传
                </button>
              </uni-section>
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>

      <view class="submit">
        <button hover-class="button-hover" @click="submit">提交</button>
      </view>
    </view>
  </template>
</template>

<script setup lang="ts">
import {
  uploadFile,
} from "@/api/meida/file";
import type { ContributeSubmitDTO } from "@/types/mycontribute";
import { submitContribute } from "@/api/content/contribute";
import { useMemberStore } from "@/stores";
import { ref } from "vue";
// 个人信息
const memberStore = useMemberStore();

// 当前上传文件名称
const currFileName = ref("");

// 表单信息
const baseFormData = ref<ContributeSubmitDTO>({
  title: "",
  briefIntroduction: "",
  url: "",
  summary: "",
  picture: "",
});

/**
 * 上传文件
 */
const onUploadFileButton = async () => {
  const res = await uploadFile("file", "file", ["pdf"], "pdf");
  console.log("uploadFile", res);
  // 更新拿到上传的文件名称
  currFileName.value = res.wrapper.currFileName;
  // 更新文件名
  baseFormData.value.url = res.wrapper.url;
};
/**
 * 上传图片
 */
const onUploadImageButton = async () => {
  const res = await uploadFile("image", "image", undefined, "image");
  console.log("uploadFile", res);
  // 更新image名
  baseFormData.value.picture = res.wrapper.url;
};

// 提交稿件信息
const submit = async () => {
  let query = baseFormData.value;

  if (query.title == null || query.title.length == 0) {
    uni.showToast({
      title: "需要指定标题",
      duration: 2000,
      icon: "error",
    });
    return;
  }

  if (query.briefIntroduction == null || query.briefIntroduction.length == 0) {
    uni.showToast({
      title: "需要指定简介",
      duration: 2000,
      icon: "error",
    });
    return;
  }

  if (query.summary == null || query.summary.length == 0) {
    uni.showToast({
      title: "需要指定概要",
      duration: 2000,
      icon: "error",
    });
    return;
  }
  //TODO 思考究竟要不要一定要上传文件
  // if (query.url == null || query.url.length == 0) {
  //   uni.showToast({
  //     title: "需要上传文件",
  //     duration: 2000,
  //     icon: "error",
  //   });
  //   return;
  // }

  try {
    const res = await submitContribute(query);
    console.log("submit-res", res);
    uni.showToast({
      title: "提交成功",
      duration: 2000,
      mask: true,
    });
    setTimeout(() => {
      uni.reLaunch({
        url: "/pages/contribute/contribute", // 当前页面的路径
      });
    }, 1500);
  } catch (e) {
    uni.showToast({
      title: "提交失败",
      duration: 2000,
      icon: "error",
    });
  }
};
</script>

<style lang="scss" scoped>
@import "/src/assert/styles/variables.scss";

.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10rpx;
  button {
    font-size: small;
    margin: 30rpx;
    background-color: $el-secondary-color;
  }
}

.img-container {
  .img-select-body {
    padding: 10px;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;

    button {
      display: flex;
      justify-content: stretch;
      text-align: center;
      background-color: $el-secondary-color;
      font-size: small;
    }
    image {
      height: 200rpx;
      width: 350rpx;
      border-radius: 10rpx;
      background-color: rgb(192, 196, 196);
    }
  }
}

.itemImput {
  background-color: rgb(150, 141, 141);
}

.upload {
  margin: 10px;
  button {
    background-color: $el-secondary-color;
    margin: 40rpx;
    font-size: small;
  }
}

.submit {
  button {
    margin: 20rpx;
    background-color: $el-primary-color;
  }
}
</style>
